<!DOCTYPE html>
<html>
<head>
    <title>Editable Span</title>
</head>
<body>
    <p>Click on the span below to edit it:</p>
    <span id="editableSpan" contenteditable="true">This is an editable span.</span>

    <script>
        // JavaScript code to handle editing
        var span = document.getElementById("editableSpan");

        span.addEventListener("input", function() {
            // This event handler will be triggered whenever the content changes
            // You can access the edited content with span.innerText or span.innerHTML
            console.log("Content changed:", span.innerText);
        });
    </script>
</body>
</html>